<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <title>Dev mode</title>
    <script>window.GLOBAL_CONFIG = {
            IS_DEV: true
        };</script>
    <script type="module" src="/main.tsx"></script>
    <style>
        :root {
            --x-init-fg: hsl(0 0% 10%);
            --x-init-body-fg: hsl(0 0% 10%);
            --x-init-body-bg: hsl(0 0% 90%);
            --x-init-loading-bg: hsl(0 0% 90%);
            --x-init-loading-fg: hsl(0 0% 10%);

            @media (prefers-color-scheme: dark) {
                --x-init-fg: hsl(0 0% 90%);
                --x-init-body-fg: hsl(0 0% 90%);
                --x-init-body-bg: hsl(0 0% 0%);
                --x-init-loading-bg: hsl(0 0% 0%);
                --x-init-loading-fg: hsl(0 0% 90%);
            }
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        body {
            gap: var(--x-init-gutter);
            margin: 0;
            background: var(--x-init-body-bg);
            padding: 0;
            color: var(--x-init-body-fg);
            line-height: 1.5;
        }

        #loading {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5em;
            height: 100svh;
            font-family: monospace;
        }

        #loading::before {
            animation: spin 1s linear infinite;
            box-sizing: border-box;
            border: 1px solid var(--x-init-loading-bg);
            border-top-color: var(--x-init-loading-fg);
            border-radius: 50%;
            width: 16px;
            height: 16px;
            content: "";
        }
    </style>

</head>

<body>
    <div id=loading>Loading...</div>
</body>

</html>